import React, { useEffect } from 'react'
// import "./Goods.css"

export default function Goods() {
    
    let [imgs,setimgs]=React.useState(["/img/1.jpg","/img/2.jpg","/img/3.jpg","/img/4.jpg","/img/5.jpg"])
    let [indexs,setindexs] = React.useState(1)
    let changimg = (i)=>{
        return ()=>{
            setindexs(i)

        }
    }
  return (
    <div>
        <img className='bigimg' src={`/img/${indexs+1}.jpg`} alt="" />
        <ul>
            {
                imgs.map((iteam,index)=>{
                    return <li onMouseOver={changimg(index)} key={index}><img className={index===indexs?"bg":null} src={iteam} alt="" /></li>
                })
            }
   
        
        
        </ul>
    </div>
  )
}
